{% extends 'base.html' %}
{% block content %}
    <style>
        .table-container {
            max-width: 80%; /* 设置容器的最大宽度 */
            margin-left: 250px;
            margin-top: 0;
            padding: 15px; /* 添加一些内边距 */
            background-color: #f8f9fa; /* 设置背景颜色 */
            border: 1px solid #ddd; /* 添加边框 */
            border-radius: 5px; /* 添加圆角 */
        }

        .table {
            width: 100%; /* 使表格宽度适应容器 */
            table-layout: fixed; /* 设置表格布局为固定宽度 */
        }

        .table th, .table td {
            word-wrap: break-word; /* 使长单词或URL在单元格内换行 */
        }
    </style>
    <div class="top_button">
        {% include 'index_base.html' %}
    </div>
    <div class="table-container">
        <table class="table table-bordered">
            <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">{{ device_verbose_names.device_name}}</th>
                <th scope="col">{{ device_verbose_names.device_id }}</th>
                <th scope="col">{{ device_verbose_names.device_model }}</th>
                <th scope="col">{{ device_verbose_names.device_addr }}</th>
                <th scope="col">{{ device_verbose_names.updated_time }}</th>
                <th scope="col">{{ device_verbose_names.created_time }}</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            {% if devices_info %}
                {% for device_info in page_obj %}
                    <tr>
                        <td><a href="{% url 'device:device_detail' device_info.id %}">{{ device_info.id }}</a></td>
                        <th scope="col">{{ device_info.device_name }}</th>
                        <th scope="col">{{ device_info.device_id }}</th>
                        <th scope="col">{{ device_info.device_model }}</th>
                        <th scope="col">{{ device_info.device_addr }}</th>
                        <th scope="col">{{ device_info.updated_time }}</th>
                        <th scope="col">{{ device_info.created_time }}</th>
                        <td><a class="btn btn-info" href="{% url 'device:device_detail' device_info.id %}"
                               role="button"><span title="详情"><i class="fa-solid fa-circle-info"></i></span></a>
                            <a class="btn btn-primary" href="{% url 'device:device_updata' device_info.id %}"
                               role="button"><span title="修改"><i class="fa-solid fa-pen-to-square"></i></span></a>
                            <a class="btn btn-danger" href="{% url 'device:device_delete' device_info.id %}"
                               role="button"><span title="删除"><i class="fa-solid fa-trash"></i></span></a></td>
                    </tr>
                {% endfor %}
            {% endif %}
            </tbody>
        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item ">
                    {% if page_obj.has_previous %}
                        <a class="page-link"
                           href="?search={{ keyword }}&page={{ page_obj.previous_page_number }}">上一页 </a>
                    {% else %}
                        <a class="page-link" href="?search={{ keyword }}&page={{ current_page }}">上一页 </a>
                    {% endif %}
                </li>
                {#总的页数#}
                {% for page_num in  page_obj.paginator.page_range %}
                    {% if page_num == current_page %}
                        <li class="page-item active"><a class="page-link"
                                                        href="?search={{ keyword }}&page={{ page_num }}"><span>{{ page_num }}</span></a>
                        </li>
                    {% else %}
                        <li class="page-item"><a class="page-link"
                                                 href="?search={{ keyword }}&page={{ page_num }}"><span>{{ page_num }}</span></a>
                        </li>
                    {% endif %}
                {% endfor %}
                <li class="page-item">
                    {% if page_obj.has_next %}
                        <a class="page-link"
                           href="?search={{ keyword }}&page={{ page_obj.next_page_number }}">下一页 </a>
                    {% else %}
                        <a class="page-link" href="?search={{ keyword }}&page={{ current_page }}">下一页 </a>
                    {% endif %}
                </li>
            </ul>
        </nav>
    </div>
{% endblock %}